<template>
	<view>
		<u-navbar
			title="弹窗"
			@leftClick="navigateBack"
			safeAreaInsetTop
			fixed
			placeholder
		></u-navbar>
		<u-gap
			height="20"
			bgColor="#fff"
		></u-gap>
		<u-cell-group>
			<u-cell
				:titleStyle="{fontWeight: 500}"
				@click="openPopup(item.popupData)"
				:title="item.title"
				v-for="(item, index) in list"
				:key="index"
				isLink
			>
				<template #icon>
					<image
						class="u-cell-icon"
						:src="item.iconUrl"
						mode="widthFix"
					></image>
				</template>
			</u-cell>
		</u-cell-group>
		<u-popup
			:safeAreaInsetBottom="true"
			:mode="popupData.mode"
			:show="show"
			:round="popupData.round"
			:overlay="popupData.overlay"
			:closeable="popupData.closeable"
			:closeOnClickOverlay="popupData.closeOnClickOverlay"
			:closeIconPos="popupData.closeIconPos"
			:closeIconInset="popupData.closeIconInset"
			:closeIcon="popupData.closeIcon"
			:closeIconColor="popupData.closeIconColor"
			:closeIconSize="popupData.closeIconSize"
			:margin="popupData.margin"
			:width="popupData.width"
			:height="popupData.height"
			:title="popupData.title"
			:titleAlign="popupData.titleAlign"
			:titleColor="popupData.titleColor"
			:titleFontSize="popupData.titleFontSize"
			:titleBold="popupData.titleBold"
			@close="close"
			@open="open"
		>
			<view
				class="u-popup-slot"
				:style="{
					marginTop: ['left', 'right'].includes(popupData.mode) ? '480rpx' : '0',
				}"
			>
				<u-button
					type="success"
					text="点我关闭"
					customStyle="width: 200rpx"
					@click="show = !show"
				></u-button>
			</view>
		</u-popup>

		<u-popup :round="10" :closeable="true">
			<template #trigger>
				<view style="padding:10px 15px;">
					使用触发器打开
				</view>
			</template>
			<view style="padding:50px 0;text-align: center;">
				这里是正文
				<u-button type="success" text="在打开一个" customStyle="width: 200rpx" @click="openPopup2"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				popupData: {
					overlay: true,
					mode: 'bottom',
					round: '',
					closeable: true,
					closeIcon:'',
					closeIconColor:'',
					closeIconPos:'top-right',
					closeOnClickOverlay: true,
					//width:'200px',
					title: ''
				},
				list: [{
						popupData: {
							overlay: true,
							mode: 'top',
							round: 10,
							closeOnClickOverlay: true
						},
						title: '顶部弹出',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeTop.png'
					},
					{
						popupData: {
							overlay: true,
							mode: 'right',
							closeOnClickOverlay: true
						},
						title: '右侧弹出',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeRight.png'
					},
					{
						popupData: {
							overlay: true,
							mode: 'bottom',
							closeOnClickOverlay: true
						},
						title: '底部弹出',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeBottom.png'
					},
					{
						popupData: {
							overlay: true,
							mode: 'left',
							closeOnClickOverlay: true
						},
						title: '左侧弹出',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeLeft.png'
					},
					{
						popupData: {
							overlay: true,
							mode: 'center',
							round: 10,
							closeOnClickOverlay: true
						},
						title: '居中弹出',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeCenter.png'
					},
					{
						popupData: {
							overlay: true,
							mode: 'bottom',
							margin: 15,
							round: 20,
							closeable: true,
							closeOnClickOverlay: true
						},
						title: '设置外边距',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/showCloseBtn.png'
					},
					{
						popupData: {
							overlay: true,
							mode: 'bottom',
							round: 10,
							closeOnClickOverlay: true
						},
						title: '显示圆角',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/showRadis.png'
					},
					{
						popupData: {
							overlay: true,
							mode: 'bottom',
							round: 10,
							closeOnClickOverlay: true,
							title: '这里是标题',
						},
						title: '显示标题',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/showRadis.png'
					},
					{
						popupData: {
							overlay: true,
							mode: 'bottom',
							closeable: false,
							closeOnClickOverlay: false
						},
						title: '禁止点击遮罩关闭',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/noClose.png'
					},
					{
						popupData: {
							overlay: true,
							mode: 'bottom',
							closeable: true,
							closeOnClickOverlay: true
						},
						title: '显示关闭按钮',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/showCloseBtn.png'
					},
					{
						popupData: {
							overlay: true,
							mode: 'center',
							closeable: true,
							closeOnClickOverlay: false,
							closeIcon:'close-circle',
							closeIconPos:'outset-bottom-center',
							closeIconColor:'#fff',
							closeIconSize:'30',
							round: 15,
						},
						title: '幕帘效果',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/showCloseBtn.png'
					}
				]
			}
		},
		methods: {
			openPopup2(){
				this.show = !this.show
				this.popupData = {
					overlay: true,
					mode: 'center',
					round: 10,
					closeOnClickOverlay: true
				}
			},
			openPopup(popupData) {
				this.popupData = Object.assign({}, this.popupData, popupData)
				uni.$u.sleep().then(() => {
					this.show = !this.show
				})
			},
			navigateBack() {
				uni.navigateBack()
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss">
	.u-popup-slot {
		width: 200px;
		height: 150px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
</style>
